<template>
  <div class="tab-control">
    <div v-for="(item,index) in titles" :key="index" class="tab-control-item"
    :class="{active:currentIndex === index}" @click="itemClick(index)">
        <span>{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabControl',
  props: {
      titles: {
          type: Array,
          default() {
              return []
          }
      }
  },
  data() {
      return {
          currentIndex: 0
      }
  },
  methods: {
      itemClick(index) {
          this.currentIndex = index
          this.$emit('tabClick', index)
      }
  }
}
</script>

<style scoped>
    .tab-control {
        display: flex;
        text-align: center;
        height: 44px;
        line-height: 44px;
        font-size: 15px;
        background-color: #fff;
    }
    .tab-control-item {
        flex: 1;
    }
    .active {
        color: var(--color-high-text);
    }
    .active span {
        border-bottom: 3px solid var(--color-tint);
        padding: 2px 5px;
    }
</style>
 